<template lang="pug">
  .container
    top-menu
    .row
      .col-sm-3
        side
      .col-sm-9
        .topic__card(v-for="item in list")
          .topic__card__hd 1题  （自建）
          .topic__card__bd
            .title {{item.number}}.{{item.title}}
            ol(type="A")
              li(v-for="option in item.options") {{option.option}}
          .topic__card__ft
            .topic__card__ft__lf
              button.btn.btn-sm.btn-outline-primary 答案
              button.btn.btn-sm.btn-outline-primary 解析
              button.btn.btn-sm.btn-outline-primary 移除
              button.btn.btn-sm.btn-outline-primary 修改
            .topic__card__ft__rt
              span 分值
              span.score 4
        .lession__test__ctrl
          button.btn.btn-sm.btn-outline-primary 保存
          .extra
            button.btn.btn-sm.btn-outline-primary(@click="databaseTest") 题库题目
            button.btn.btn-sm.btn-outline-primary(@click="localTest") 本机题目
</template>
<style lang="scss">
.topic__card {
  padding: 15px 20px;
  border-radius: 10px;
  background-color: #fcfcfc;
  margin-bottom: 12px;
}
.topic__card__hd {
  padding-bottom: 8px;
  font-size: 12px;
  font-weight: bold;
  border-bottom: 1px solid #ececec;
}
.topic__card__ft {
  @include clearfix();
  padding-top: 10px;
  border-top: 1px solid #ececec;
}
.topic__card__ft__lf {
  float: left;
  button {
    margin-right: 30px;
    font-size: 12px;
  }
}
.topic__card__ft__rt {
  float: right;
  font-size: 12px;
  .score {
    display: inline-block;
    margin-left: 10px;
    width: 50px;
    height: 22px;
    text-align: center;
    line-height: 20px;
    border-radius: 4px;
    border: 1px solid $teacherMainColor;
  }
}
.lession__test__ctrl {
  position: relative;
  text-align: center;
  .extra {
    position: absolute;
    right: 0;
    top: 0;
    .btn {
      margin-left: 10px;
    }
  }
}
</style>

<script>
import side from './side.vue'
import topMenu from './menu.vue'
import api from 'api/teacher/test'
export default {
  data () {
    return {
      list: [],
      id: this.$route.params.catelogid
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      return api.list(this.id).then((response) => {
        this.list = response.data.data
      })
    },
    databaseTest () {
      this.$store.commit('show', 'databaseTest')
    },
    localTest () {
      this.$store.commit('show', 'localTest')
    }
  },
  components: {
    side,
    topMenu
  }
}
</script>

